<template>
  <div id="maxId">
    <el-container>
      <el-header>
        <h1>电商管理系统</h1>
        <i
          style="margin-right: 20px; cursor: pointer"
          class="el-icon-switch-button"
          @click="exit"
        ></i>
      </el-header>
      <el-container>
        <el-aside :width="isCollapse ? '66px' : '200px'">
          <p class="tab_p">
            <i
              :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
              @click="tab_cut"
            ></i>
          </p>
          <el-menu
            background-color="rgb(51, 65, 87)"
            default-active="1-4-1"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            :collapse="isCollapse"
            :unique-opened="true"
          >
            <el-submenu
              :index="index + ''"
              v-for="(item, index) in usersList"
              :key="item.id"
            >
              <template slot="title" text-color="red">
                <i :class="icon[index].icon"></i>
                <span slot="title">{{ item.authName }}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item
                  active-text-color="red"
                  @click="nav_users(ChildrenItem.path)"
                  v-for="ChildrenItem in item.children"
                  :key="ChildrenItem.id"
                  :index="ChildrenItem.id + ''"
                >
                  <i :class="icon[index].children.icon"></i>
                  {{ ChildrenItem.authName }}</el-menu-item
                >
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-container>
          <el-main>
            <router-view></router-view>
          </el-main>
          <el-footer
            >电商管理系统@2022.03.25 Author：aman 版本：1.0
            版权：作者所有</el-footer
          >
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>
<script>
export default {
  name: "Interface",
  data() {
    return {
      isCollapse: false,
      type: true,
      usersList: [],
      icon: [
        {
          icon: "el-icon-user-solid",
          children: {
            icon: "el-icon-user-solid",
          },
        },
        {
          icon: "el-icon-lock",
          children: {
            icon: "el-icon-lock",
          },
        },
        {
          icon: "el-icon-shopping-bag-2",
          children: {
            icon: "el-icon-shopping-bag-2",
          },
        },
        {
          icon: "el-icon-sold-out",
          children: {
            icon: "el-icon-sold-out",
          },
        },
        {
          icon: "el-icon-pie-chart",
          children: {
            icon: "el-icon-pie-chart",
          },
        },
      ],
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    tab_cut() {
      this.isCollapse = !this.isCollapse;
    },
    //用户路由
    nav_users(e) {
      this.$router.push(`/interface/${e}`);
      this.$route.path.substr(e);
    },
    //权限路由
    authority() {
      this.$router.push("/interface/authority");
    },
    // 退出登录
    exit() {
      window.localStorage.clear();
      this.$router.push("/login");
      this.$message({
        message: "退出成功！",
        type: "success",
        center: "true",
      });
    },
  },
  mounted() {
    this.axios.get("menus").then((res) => {
      if (res.data.meta.status == 200) {
        console.log(res.data.data);
        this.usersList = res.data.data;
        console.log(res);
      } else {
        this.$message({
          message: "导航栏错误！",
          type: "success",
          center: "true",
        });
      }
    });
  },
};
</script>

<style lang='less' scope>
#maxId {
  width: 100%;
  height: 100vh;
  background: teal;

  .el-header {
    background-color: rgb(51, 65, 87);
    color: white;
    line-height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .header {
      img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
      }
    }
  }

  .el-aside {
    height: 92vh;
    background-color: rgb(51, 65, 87);
    color: white;
    .el-menu {
      border-right: none;
    }
    .el-menu--collapse {
      width: 45px;
    }

    .tab_p {
      text-align: center;
    }
    .el-menu-vertical-demo:not(.el-menu--collapse) {
      // width: 200px;
      min-height: 400px;
    }
    .el-menu-item-group__title {
      padding: 0px;
    }
    .el-menu-vertical-demo {
      color: white;
      .el-submenu__title {
        color: white;
        // .el-submenu__icon-arrow {
        //   position: initial;
        //   margin-left: 65px;
        // }
      }
      .el-submenu__title:hover {
        background: #2c3e50 !important;
      }
      .is-active {
        color: rgb(255, 208, 75) !important;
      }
      .el-menu-item {
        color: white;
        min-width: 0px;
      }
      .el-menu-item:hover {
        background: #2c3e50 !important;
      }
    }
  }

  .el-main {
    background-color: #e9eef3;
  }
  .el-footer {
    width: 100%;
    height: 30px !important;
    background-color: #e9eef3;
    padding: 0px;
    text-align: center;
    // opacity: 0.8;
    color: rgba(35, 35, 32, 0.7);
    font-size: 12px;
    line-height: 30px;
  }
  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
}
</style>